<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Get My Location</title>
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=520E247F752eeebeb0580ee2f8a61e42"></script>
        
        <script type="text/javascript" charset="utf-8">
            // µ»¥˝PhoneGapº”‘ÿ
            document.addEventListener("deviceready", onDeviceReady, false);
            
            // º”‘ÿÕÍ≥…
            function onDeviceReady() {
                navigator.geolocation.getCurrentPosition(onSuccess, onError,{ maximumAge: 3000, timeout: 100000, enableHighAccuracy: true });
            }
            
            // onSuccess ªÿµ˜∫Ø ˝
            //  Ω” ’∞¸∫¨µ±«∞µÿ¿ÌŒª÷√◊¯±Í–≈œ¢µƒPosition∂‘œÛ
            function onSuccess(position) {
                var element = document.getElementById('geolocation');
                var longitude = position.coords.longitude; //æ≠∂»
                var latitude = position.coords.latitude;//Œ≥∂»
                getPosition(longitude,latitude);
            }
            
            // onError ªÿµ˜∫Ø ˝£¨ Ω” ’∞¸∫¨æﬂÃÂ¥ÌŒÛ–≈œ¢µƒPositionError ∂‘œÛ
            function onError(error) {
                alert('¥ÌŒÛ¥˙¬Î: '    + error.code    + '\n' +'œÍœ∏–≈œ¢: ' + error.message + '\n');
            }
            //∏˘æ›µ±«∞æ≠Œ≥∂»ªÒ»°æﬂÃÂµÿ÷∑
            function getPosition(longitude,latitude){
                // ∞Ÿ∂»µÿÕºAPIπ¶ƒ‹
                var map = new BMap.Map("map");
                var point = new BMap.Point(longitude,latitude);
                map.centerAndZoom(point,14);
                map.addOverlay(new BMap.Marker(point));
                map.enableScrollWheelZoom();
                
                var gc = new BMap.Geocoder();
                
                gc.getLocation(point, function(rs){
                               var addComp = rs.addressComponents;
                               var info=document.getElementById("info");
                               info.innerHTML = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                               });   
            }
            
            </script>
        
    </head>
    <style type="text/css">
        #map {width: 100%;height: 300px;overflow: hidden;margin:0;}
        </style>
    <body> 
        <div data-role="page">
            <div data-role="header">
                <h2>Get My Position</h2>
            </div>
            <div data-role="content" id="map">	
            </div>		
            <div data-role="footer" >
                <p id="info"></p>
            </div>
        </div>		
    </body>
</html>
